<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="企业认证"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c item-line">
        <div class="title-name">企业名称</div>
        <Input
          v-model.trim="name"
          placeholder="请输入"
          maxlength="25"
          style="width: 200px"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">证件类型</div>
        <Select v-model="type" filterable style="width: 200px">
          <Option
            v-for="item in typeList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">法定代表人</div>
        <Input
          v-model.trim="person"
          placeholder="请输入"
          maxlength="25"
          style="width: 200px"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">证件号码</div>
        <Input
          v-model.trim="number"
          placeholder="请输入"
          maxlength="25"
          style="width: 200px"
        />
      </div>
      <div class="flx-row-s-s item-line">
        <div class="title-name">证件照片</div>
        <div class="flx-col-c-c">
          <Upload
            v-if="!file"
            type="drag"
            :before-upload="handleBeforeUpload"
            :show-upload-list="false"
            action="/"
          >
            <div
              class="add-photo"
              :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'add-photo'
                    : colorType == 1
                    ? 'add-photo-g'
                    : colorType == 2
                    ? 'add-photo-b'
                    : 'add-photo-p') +
                  '@2x.png')})`,
              }"
            ></div>
          </Upload>
          <div
            v-else
            class="img-display"
            style="position: relative"
            :style="{ backgroundImage: 'url(' + fileImg + ')' }"
          >
            <Spin :withIcon="true" v-if="uploading"></Spin>
            <div class="delect-area" v-if="!uploading" @click="deletePic"></div>
          </div>
          <span class="c-r" style="margin-top: 5px">点击上传证件正面</span>
        </div>
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { addEnterpriseCertificates, uploadCompanyPhoto } from "@/api/user";
import { comCertList } from "@/utils/publicData";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    colorType: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      loading: false,
      uploading: true,
      typeList: comCertList(),
      // 表单数据
      file: null,
      fileImg: "",
      path: "",
      name: "",
      type: -1,
      number: "",
      person: "",
    };
  },
  methods: {
    // 选择图片后处理
    handleBeforeUpload: function (file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg"
      ) {
        this.$Message.warning("图片要求上传jpg或者png格式或者jpeg格式");
        return false;
      }
      if (file.size > 1048576) {
        this.$Message.warning("图片大小不能超过1M");
        return false;
      }

      this.file = file;
      this.fileImg = window.URL.createObjectURL(file);
      this.uploadCompanyPhoto();
      return false;
    },
    // 上传图片
    async uploadCompanyPhoto() {
      this.uploading = true;
      let data = new FormData();
      data.append("file", this.file);
      let res = await uploadCompanyPhoto(data);
      if (res.code == 200) {
        if (res.data.name != null && res.data.name != "")
          this.name = res.data.name;
        if (res.data.number != null && res.data.number != "")
          this.number = res.data.number;
        if (res.data.type != null && res.data.type != "")
          this.type = res.data.type;
        if (res.data.person != null && res.data.person != "")
          this.person = res.data.person;

        this.path = res.data.path;
        this.fileImg = res.data.url;
      } else {
        this.deletePic();
      }
      this.uploading = false;
    },
    // 删除图片
    deletePic() {
      this.file = null;
      this.fileImg = "";
      this.path = "";
    },
    // 提交表单
    async submit() {
      if (!this.name) {
        this.$Message.warning("请输入真实姓名！");
        return;
      }
      if (!this.number) {
        this.$Message.warning("请输入正确的证件号码！");
        return;
      }
      if (!this.person) {
        this.$Message.warning("请输入法定代表人！");
        return;
      }
      if (this.type == -1) {
        this.$Message.warning("请输入正确的证件号码！");
        return;
      }
      if (!this.path) {
        this.$Message.warning("请上传证件正面图片！");
        return;
      }
      this.loading = true;
      let data = {
        name: this.name,
        number: this.number,
        type: this.type,
        imgUrl: this.fileImg,
        imgName: this.path,
        person: this.person,
      };
      let res = await addEnterpriseCertificates(data);
      if (res.code == 200) {
        this.$Message.success("添加认证成功！");
        this.$emit("submit-success");
        this.cancel();
      }
      this.loading = false;
    },
    cancel() {
      this.config = false;
      this.name = "";
      this.type = -1;
      this.number = "";
      this.file = null;
      this.fileImg = "";
      this.person = "";
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
.add-photo {
  @include size(200px, 121px);
  @include bg-setting("add-photo");
  cursor: pointer;
}
.img-display {
  @include size(200px, 121px);
  border: 1px dashed #dcdee2;
  @include bg-setting();
  position: relative;
  border-radius: 5px;
}
.img-display .delect-area {
  display: none;
}
.img-display:hover .delect-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fc461e;
  @include bg-setting("cuowu", 10px 10px, center);
  transition: background-color 0.2s;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>